<template>
  <div class="config-test">
    <h1>🔧 配置测试页面</h1>
    
    <el-card class="config-card">
      <template #header>
        <div class="card-header">
          <span>当前配置</span>
          <el-tag :type="config.isDev ? 'success' : 'warning'">
            {{ config.env }}
          </el-tag>
        </div>
      </template>
      
      <el-descriptions :column="1" border>
        <el-descriptions-item label="应用标题">
          {{ config.appTitle }}
        </el-descriptions-item>
        <el-descriptions-item label="后端地址">
          <el-tag>{{ config.baseURL }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="API 前缀">
          {{ config.apiPrefix || '(无)' }}
        </el-descriptions-item>
        <el-descriptions-item label="使用代理">
          <el-tag :type="config.useProxy ? 'success' : 'info'">
            {{ config.useProxy ? '是' : '否' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="超时时间">
          {{ config.timeout }}ms
        </el-descriptions-item>
        <el-descriptions-item label="当前环境">
          {{ config.env }}
        </el-descriptions-item>
        <el-descriptions-item label="开发环境">
          {{ config.isDev ? '是' : '否' }}
        </el-descriptions-item>
        <el-descriptions-item label="生产环境">
          {{ config.isProd ? '是' : '否' }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="config-card">
      <template #header>
        <span>环境变量</span>
      </template>
      
      <el-table :data="envList" border>
        <el-table-column prop="key" label="变量名" width="250" />
        <el-table-column prop="value" label="值" />
      </el-table>
    </el-card>

    <el-card class="config-card">
      <template #header>
        <span>API 测试</span>
      </template>
      
      <el-space direction="vertical" style="width: 100%">
        <el-alert
          title="测试说明"
          type="info"
          :closable="false"
        >
          点击下方按钮测试 API 连接是否正常
        </el-alert>
        
        <el-button type="primary" @click="testApi" :loading="testing">
          测试 API 连接
        </el-button>
        
        <el-alert
          v-if="testResult"
          :title="testResult.success ? '连接成功' : '连接失败'"
          :type="testResult.success ? 'success' : 'error'"
          :description="testResult.message"
          show-icon
          :closable="false"
        />
      </el-space>
    </el-card>

    <el-card class="config-card">
      <template #header>
        <span>请求 URL 示例</span>
      </template>
      
      <el-descriptions :column="1" border>
        <el-descriptions-item label="实际请求地址">
          <code>{{ actualUrl }}</code>
        </el-descriptions-item>
        <el-descriptions-item label="代理前">
          <code>/api/users</code>
        </el-descriptions-item>
        <el-descriptions-item label="代理后">
          <code>{{ config.baseURL }}/users</code>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import config from '@/config'
import request from '@/api/request'

const testing = ref(false)
const testResult = ref(null)

// 环境变量列表
const envList = computed(() => {
  const env = import.meta.env
  return Object.keys(env)
    .filter(key => key.startsWith('VITE_'))
    .map(key => ({
      key,
      value: env[key]
    }))
})

// 实际请求地址
const actualUrl = computed(() => {
  if (config.useProxy) {
    return '/api (代理到 ' + config.baseURL + ')'
  } else {
    return config.baseURL + config.apiPrefix
  }
})

// 测试 API
const testApi = async () => {
  testing.value = true
  testResult.value = null
  
  try {
    const response = await request.get('/')
    testResult.value = {
      success: true,
      message: 'API 连接正常！响应: ' + JSON.stringify(response)
    }
  } catch (error) {
    testResult.value = {
      success: false,
      message: '连接失败: ' + (error.message || '未知错误')
    }
  } finally {
    testing.value = false
  }
}
</script>

<style scoped>
.config-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  margin-bottom: 20px;
  color: #2a5085;
}

.config-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

code {
  padding: 2px 6px;
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}
</style>

